<template>
  <div class="outer-wrap flex">
    <div class="column-wrap">
      <div class="up-title">
        <span>幅度</span>
        <img class="icon-item" src="../../../images/tower-crane-icon/fudu.png" />
      </div>
      <div class="middle-content">
        <span class="number">{{ deviceInfo.craneRange }}<span class="text"> m</span></span>
      </div>
      <div class="slider">
        <div class="content">
          <div class="slider-item">
            <i class="line default-slider"></i>
            <i class="line show-slider" :style="{width: craneRange + '%'}"></i>
            <i class="line show-line" :style="{left: craneRange + '%'}"></i>
          </div>
        </div>
        <div class="slider-box">
          <span>0</span>
          <span>{{ fuduMaxNum }}</span>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="up-title">
        <span>高度</span>
        <img class="icon-item" src="../../../images/tower-crane-icon/gaodu.png" />
      </div>
      <div class="middle-content">
        <span class="number">{{ deviceInfo.height }}<span class="text"> m</span></span>
      </div>
      <div class="slider">
        <div class="content">
          <div class="slider-item">
            <i class="line default-slider"></i>
            <i class="line show-slider" :style="{width: height + '%'}"></i>
            <i class="line show-line" :style="{left: height + '%'}"></i>
          </div>
        </div>
        <div class="slider-box">
          <span>0</span>
          <span>{{ gaoduMaxNum }}</span>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="up-title">
        <span>风速</span>
        <img class="icon-item" src="../../../images/tower-crane-icon/fengsu.png" />
      </div>
      <div class="middle-content">
        <span class="number">{{ deviceInfo.windSpeed }}<span class="text"> m/s</span></span>
      </div>
      <div class="slider">
        <div class="content">
          <div class="slider-item">
            <i class="line default-slider"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="up-title">
        <span>吊重</span>
        <img class="icon-item" src="../../../images/tower-crane-icon/diaozhong.png" />
      </div>
      <div class="middle-content">
        <span class="number">{{ deviceInfo.liftingWeight }}<span class="text"> t</span></span>
      </div>
      <div class="slider">
        <div class="content">
          <div class="slider-item">
            <i class="line default-slider"></i>
            <i class="line show-slider" :style="{width: liftingWeight + '%'}"></i>
            <i class="line show-line" :style="{left: liftingWeight + '%'}"></i>
          </div>
        </div>
        <div class="slider-box">
          <span>0</span>
          <span>{{ diaozhongMaxNum }}</span>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="up-title">
        <span>力距</span>
        <img class="icon-item" src="../../../images/tower-crane-icon/liju.png" />
      </div>
      <div class="middle-content">
        <span class="number">{{ deviceInfo.moment }}<span class="text"> Nm</span></span>
      </div>
      <div class="slider">
        <div class="content">
          <div class="slider-item">
            <i class="line default-slider"></i>
            <i class="line show-slider" :style="{width: moment + '%'}"></i>
            <i class="line show-line" :style="{left: moment + '%'}"></i>
          </div>
        </div>
        <div class="slider-box">
          <span>0</span>
          <span>{{ lijuMaxNum }}</span>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="up-title">
        <span>荷载比</span>
        <img class="icon-item" src="../../../images/tower-crane-icon/hebi.png" />
      </div>
      <div class="middle-content">
        <span class="number">{{ deviceInfo.loadRatio }}<span class="text"> %</span></span>
      </div>
      <div class="slider">
        <div class="content">
          <div class="slider-item">
            <i class="line default-slider"></i>
            <i class="line show-slider" :style="{width: loadRatio + '%'}"></i>
            <i class="line show-line" :style="{left: loadRatio + '%'}"></i>
          </div>
        </div>
        <div class="slider-box">
          <span>0</span>
          <span>{{ hebiMaxNum }}</span>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="up-title">
        <span>转角</span>
        <img class="icon-item" src="../../../images/tower-crane-icon/zhuanjiao.png" />
      </div>
      <div class="middle-content">
        <span class="number">{{ deviceInfo.corner }}<span class="text angle"> °</span></span>
      </div>
      <div class="slider">
        <div class="content">
          <div class="slider-item">
            <i class="line default-slider"></i>
            <i class="line show-slider" :style="{width: corner + '%'}"></i>
            <i class="line show-line" :style="{left: corner + '%'}"></i>
          </div>
        </div>
        <div class="slider-box">
          <span>0</span>
          <span>{{ zhuanjiaoMaxNum }}</span>
        </div>
      </div>
    </div>

    <div class="column-wrap">
      <div class="up-title">
        <span>倾角</span>
        <img class="icon-item" src="../../../images/tower-crane-icon/qinjiao.png" />
      </div>
      <div class="middle-content">
        <span class="number">{{ deviceInfo.dipAngle }}<span class="text angle"> °</span></span>
      </div>
      <div class="slider">
        <div class="content">
          <div class="slider-item">
            <i class="line default-slider"></i>
            <i class="line show-slider" :style="{width: dipAngle + '%'}"></i>
            <i class="line show-line" :style="{left: dipAngle + '%'}"></i>
          </div>
        </div>
        <div class="slider-box">
          <span>0</span>
          <span>{{ qinjiaoMaxNum }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "NextShowInfo",
    components: {},
    data() {
      return {
        craneRange: 30,
        height: 70,
        liftingWeight: 10,
        moment: 50,
        loadRatio: 60,
        corner: 30,
        dipAngle: 50,

        fuduMaxNum: 54,
        gaoduMaxNum: 120,
        diaozhongMaxNum: 20,
        lijuMaxNum: 20,
        hebiMaxNum: 100,
        zhuanjiaoMaxNum: 360,
        qinjiaoMaxNum: 360,

        deviceInfo: {
          craneRange: "",
          corner: "",
          dipAngle: "",
          height: "",
          liftingWeight: "",
          loadRatio: "",
          moment: "",
          windSpeed: ""
        }
      }
    },
    props: {
      dataInfo: Object
    },
    watch: {
      dataInfo(val) {
        this.deviceInfo = val;
      }
    },
    created() {
    },
    mounted() {

    },
    methods: {
      getPercent(num, total) {
        if (num > total) {
          return "0";
        }
        return Math.round(num / total * 10000) / 100.00;
      },

      renderPercentInfo(data) {
        this.craneRange = this.getPercent(data.craneRange, this.fuduMaxNum);
        this.height = this.getPercent(data.height, this.gaoduMaxNum);
        this.liftingWeight = this.getPercent(data.liftingWeight, this.diaozhongMaxNum);
        this.moment = this.getPercent(data.moment, this.lijuMaxNum);
        this.loadRatio = this.getPercent(data.loadRatio, this.hebiMaxNum);
        this.corner = this.getPercent(data.corner, this.zhuanjiaoMaxNum);
        this.dipAngle = this.getPercent(data.dipAngle, this.qinjiaoMaxNum);
      }
    }
  }
</script>

<style scoped lang="scss">
  .outer-wrap{
    height: 100%;

    .column-wrap{
      width: calc(12.5% - 10px);
      margin-right: 12px;
      background: #1f2432;
      font-size: 14px;
      color: #c6c9d4;
      padding: 14px;

      &:last-child{
        margin-right: 0;
      }

      .up-title{
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon-item{
          width: 16px;
          height: 16px;
        }
      }

      .middle-content{
        height: 58%;
        display: flex;
        align-items: center;

        .number{
          font-size: 24px;
          color: #ffffff;
          font-family: Arial;

          .text{
            color: #767c8d;
            font-size: 14px;
            margin-left: 4px;

            &.angle{
              position: relative;
              top: -5px;
              left: -2px;
              font-size: 18px;
            }
          }
        }
      }

      .slider{
        font-size: 12px;
        color: #8d909c;

        .content{
          display: flex;
          justify-content: center;

          .slider-item{
            position: relative;
            width: 90%;

            .line{
              position: absolute;
              left: 0;
              display: inline-block;
            }

            .default-slider,
            .show-slider{
              width: 100%;
              height: 3px;
              border-radius: 50px;
              background: #D0D6D7;
            }

            .show-slider{
              background: #449ae7;
            }

            .show-line{
              width: 3px;
              height: 9px;
              top: -3px;
              border-radius: 50px;
              background: #2293f8;
            }
          }
        }

        .slider-box{
          display: flex;
          justify-content: space-between;
          margin-top: 6px;
        }
      }
    }
  }
</style>
